<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

    <title>答题记录</title>
    <link rel="stylesheet" href="assets/mini-default.min.css" />
    <!-- <script src="assets/vue.js"></script> -->
    <!-- <script src="assets/vant.min.js"></script> -->
    <script src="assets/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <nav>
            <div style=" text-align: center;margin-bottom: 0rem;font-size: large;">答题记录</div>
        </nav>

        <!-- <div style="border-top: dashed 1px lightgray; margin-top: 10px;"></div> -->

        <div style="width: 100%; text-align: center;" class="container">
            <div style="background-color: black; color: white; font-weight: bold; padding: 0.5rem;" class="row">
                <div class="col-sm-4" style="text-align: center;">答题时间</div>
                <div class="col-sm-4" style="text-align: center;">错误次数</div>
                <div class="col-sm-4" style="text-align: center;">记录时间</div>
            </div>
            <div v-for="record in records" style="border-bottom: 1px dashed lightgray; padding: 0.3rem 0;" class="row">
                <div class="col-sm-4" style="text-align: center; border-right: 1px solid lightgray;"
                    :class="{red_background: record.created == latest_record_time}">{{
                    time_cost_format(record) }}
                </div>
                <div class="col-sm-4" style="text-align: center; border-right: 1px solid lightgray;">{{record.err_count}}</div>
                <div class="col-sm-4" style="text-align: center;" class="">{{record.created}}</div>
            </div>

        </div>

        <!-- </van-space> -->
        <!-- </div> -->
        <!-- <div style="border-top: dashed 1px lightgray; margin-top: 10px;"></div> -->

        <a href="/index.html" class="button" style="margin-top: 20px; width: 100%; text-align: center;">去答题</a>

    </div>

    <script type="module">
        // const { createApp, ref, onMounted, computed } = Vue
        import { createApp, ref, reactive, computed, onMounted } from "/assets/vue.esm-browser.prod.js"

        // 在 #app 标签下渲染一个按钮组件
        const app = createApp({
            setup() {
                const records = ref([])
                const latest_record_time = ref("")
                const refresh_records = () => {
                    const url = '/get_records'
                    axios.get(url)
                        .then(response => {
                            console.log(response.data); // 处理响应数据
                            if (response.data.code == 0) {
                                let raw_data = response.data.data
                                if (raw_data.length > 0) {
                                    for (let index = 0; index < raw_data.length; index++) {
                                        const src_record = raw_data[index];
                                        records.value.push({
                                            created: src_record.created,
                                            total_seconds: src_record.total_seconds,
                                            minute: src_record.minute,
                                            second: src_record.second,
                                            err_count: src_record.err_count,
                                        })
                                    }

                                    latest_record_time.value = records.value[0].created

                                    records.value = records.value.sort((first, second) => {
                                        return first.total_seconds - second.total_seconds
                                    })
                                }
                            }
                        })
                        .catch(error => {
                            console.error(error); // 处理错误
                            vant.showFailToast('获取记录失败');
                            // vant.showNotify({ type: 'danger', message: '添加失败' });
                        });
                }
                const time_cost_format = computed(() => {
                    return (record) => {
                        // return record.minute.toString().padStart(2, "0")

                        return `${record.minute.toString().padStart(2, "0")}:${record.second.toString().padStart(2, "0")}`
                    }
                })
                onMounted(() => {
                    // draw_grid()
                    refresh_records()
                })

                return {
                    refresh_records,
                    records, latest_record_time,
                    time_cost_format,
                }
            }
        });

        app.mount('#app');
        // window.addEventListener('load', function () {
        //     // 等待页面及其所有资源加载完成后执行的代码
        //     yourFunction();
        // });

    </script>

    <style>
        canvas {
            background-color: rgb(238, 235, 235);
            /*设置canvas的背景颜色为红色*/
        }

        tr,
        th,
        td {
            text-align: center;
        }

        .black_background {
            background-color: black;
            color: white;
            padding: 3px 10px;
        }

        .red_background {
            background-color: red;
            color: white;
            padding: 3px 10px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2
        }

        th {
            background-color: #04AA6D;
            color: white;
        }
    </style>
</body>

</html>